<template>
  <section class="apis-index-container">
 

      <search-header
      class="search-header"
      v-bind="searchHeader"
      :params="list.params"
      @handleSearch="handleSearchs"
    ></search-header>
    
 
    <base-table
      v-bind="list"

    >
    </base-table>
 
  </section>
</template>

<script>
import baseHeader from '@/components/mixins/baseHeader'
import searchHeader from '@/components/mixins/searchHeader'
import baseTable from '@/components/mixins/baseTable'
import formDialog from '@/components/mixins/formDialog'
import { mapState, mapActions } from 'vuex'
import { deepClone } from '@/utils'

const columns = [
  {
    prop: 'id',
    label: 'ID',
    // scopeType: 'slot'
  },
  {
    prop: 'user.phoneNum',
    label: '用户联系方式'
  },
  {
    prop: 'startTime',
   
     type: 'time',
    label: '开始时间'
  },
  {
    prop: 'endTime',
    label: '结束时间',
    
  },
  {
    prop: 'orderIdStr',
    label: '订单编号'
  },
  {
    prop: 'dailyIncomeStr',
    label: '每日算力收益'
  },
  {
    prop: 'totalRevenueStr',
    label: '累计算力收益'
  }
]

export default {
  name: 'menusApisIndex',
  mixins: [baseHeader, searchHeader, baseTable, formDialog],
  data () {
    return {
      total: '',
      searchHeader: {
        searchItems: [
          // {
          //   type: 'input',
          //   value: 'apiName',
          //   placeholder: '关键词搜索'
          // },
          {
            type: 'searchInput',
            value: 'keywords',
            placeholder: '关键词搜索'
          }
        ]
      },
      list: {
        columns,
        api: 'fetchIncomeListList',
        params: {
          keywords: '' ,
          status: '0',
          userId: '',
        },
         handleColumn: [
 
        ],
        handleColumnProp: {
          width: '200px'
        }
      },
      headers: {
        buttons: [
          // {
          //   type: 'Create',
          //   text: '新建',
          //   icon: 'xinjian',
          //   disabled: !this._checkPermission('/apis', 'POST')
          // }
          // ,
          // {
          //   type: 'Delete',
          //   text: '删除',
          //   icon: 'delete',
          //   disabled: !this._checkPermission('/apis', 'DELETE')
          // }
        ],
        title: '',
        showAlertIcon: false,
        paddingBottom: '10px'
        // content: '操作说明'
      },
 
 
 
    }
  },
  computed: {
    ...mapState('system', ['reflushApi'])
  },
  methods: {
    ...mapActions('system', ['ReflushApi']),
 
    handleSearchs () {
      this.list.params.apiUrl = this.$encode(this.list.params.apiUrle)
      this.handleSearch()
    },
    // 顶部操作按钮
 

    fetchTableCallBack (res) {
      if (res.code === 200) {
        /* hyt-link s */
        // this.list.params.apiUrl = this.$decode(this.list.params.apiUrl)
        /* hyt-link e */
        this.list.data = res.data.content
        console.log(this.list.data[res.data.content.length-1].total)
        this.total = this.list.data[res.data.content.length-1].total
        this.list.totalCount = res.data.totalElements
      }
    }
  },
  mounted () {
     const { userId } = this.$route.query

    if (userId) {
     
      this.list.params.userId = userId

 
    }
    
    
    this.fetchTableApi()
  },
  activated () {
    if (this.reflushApi) {
      this.fetchTableApi()
      this.ReflushApi(false)
    }
  }
}
</script>

 


<style lang="scss" scoped>
.workplace-container{
  overflow: overlay;
  height: 100%;
  .select{
    margin-bottom: 40px;
  }
  .interval{
    width:1px;
    height:438px;
    background-color: #E8E8E8;
    margin-top: -230px;
  }
  .visitor-box{
    p{
      display: flex;
      justify-content:space-between;
      padding-right: 20px;
      padding-left: 20px;
      line-height: 56px;
      strong{
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-right: 10px;
        margin-top: -4px;
      }
    }
    p:nth-child(1){
      strong{
        background-color: #ED4A66;
      }
    }
    p:nth-child(2){
      strong{
        background-color: #2593FC;
      }
    }
    p:nth-child(3){
      strong{
        background-color: #F9CB34;
      }
    }
    p:nth-child(4){
      strong{
        background-color: #38C060;
      }
    }
  }
  .title{
    display: flex;
    justify-content:space-between;
    margin-bottom: 39px;
    span:first-child{
      font-size: 18px;
      color: #333333;
      font-weight: bold;
    }
    span:last-child{
      font-size: 14px;
      cursor: pointer;
    }
  }
  .backlog{
    display: flex;
    justify-content:space-between;
    .backlog-box{
      width: 33%;
      box-sizing: border-box;
      padding: 15px 0 55px;
      cursor: pointer;
      p{
        text-align:center;
      }
      p:first-child{
        font-size: 16px;
        color: #666;
        margin-bottom: 15px;
      }
      p:last-child{
        font-size: 30px;
        color:#333;
      }
    }
    i{
      width:1px;
      min-width: 1px !important;
      border-left: 1px rgba(230,230,230,1);
      height:60px;
      margin-top: 20px;
    }
  }
  .big-box{
    display: flex;
    .left-box{
      width: 60%;
      margin-right: 30px;
      min-width: 875px;
    }
    .right-box{
      width: 40%;
      min-width: 600px;
    }
    .box{
      border:1px solid rgba(232,232,232,1);
      border-radius:4px;
      height: 100%;
      box-sizing: border-box;
      padding: 30px;
      h3{
        font-size: 18px;
        font-weight: bold;
        color:#333;
        margin-bottom: 20px;
      }
      .general{
        display: flex;
        justify-content:space-between;
        i{
          width:1px;
          min-width: 1px !important;
          height:60px;
          background:rgba(230,230,230,1);
          margin-top: 20px;
        }
        .general-box{
          width: 24%;
          min-width: 200px;
          padding: 8px 20px 8px 20px;
          display: flex;
          box-sizing: border-box;
          .jee-svg-icon-2{
            margin-top: 20px;
            margin-right: 30px;
          }
          .general-text{
            p:first-child{
              font-size: 18px;
              color: #333;
            }
            p:nth-child(2){
              line-height: 50px;
              font-size: 14px;
              span:first-child{
                color: #999999;
                display:inline-block;
                margin-right: 5px;
              }
              span:last-child{
                font-size: 16px;
              }
            }
            p:last-child{
              font-size: 14px;
              span:first-child{
                color: #999999;
                display:inline-block;
                margin-right: 5px;
              }
              span:last-child{
                color: #666666;
                font-size: 16px;
              }
            }
          }
        }
        .general-box:first-child{
          padding-left: 20px;
        }
      }

    }
  }
  .top-box{
    height: 200px;
    margin-bottom: 30px;
  }
  .bottom-box{
    height: 558px;
  }
}
</style>